<template>
  <div class="search-container">
    <a href="./">
      <img class="logo" src="../../../assets/imgs/search/jd_logo.png" alt="京东logo">
    </a>


    <!-- 将搜索框和热词包裹在一个容器中 -->
    <div class="search-area">
      <div class="search-box">
        <input type="text" placeholder="费列罗巧克力">
        <el-upload class="camera-upload" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          :show-file-list="false" :on-success="handleUploadSuccess" :on-error="handleUploadError">
          <button class="camera-btn">
            <i class="iconfont icon-xiangji"></i>
          </button>
        </el-upload>
        <button class="search-btn">搜索</button>
      </div>
      <!-- 热词放在搜索框下方 -->
      <div class="hot-search">

        <a v-for="(item, index) in hotKeywords" :key="index" href="#" @click.prevent="handleHotSearch(item)">
          {{ item }}
        </a>
      </div>
    </div>

    <button class="jd-ai" @click="handleAiClick">
      <img src="../../../assets/imgs/search/ai_chat.png" alt="">
      <span>京言AI</span>
    </button>
    <!-- 修改推广位链接的点击事件 -->
    <a
      class="promo_lk"
      @click.prevent="handlePromoClick"
      clstag="h|keycount|head|adbtn_01"
      aria-label="推广位"
      style="background-image: url(&quot;//m.360buyimg.com/babel/jfs/t1/306335/9/4387/173406/004f0601F093ecfc9/aed6fb3f8a6871b2.gif&quot;); background-size: cover;"
    >
    </a>
    <!-- AI对话框 -->
    <AiDialog v-model="aiDialogVisible" />
    <!-- 登录对话框 -->
    <LoginDialog v-model="loginDialogVisible" @login-success="onLoginSuccess" />
  </div>
</template>

<script setup>
import router from '@/router';
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useAuthStore } from '@/stores/auth'
// 引入组件
import AiDialog from './AiDialog.vue'
import LoginDialog from '@/components/login/LoginDialog.vue'
const authStore = useAuthStore()
const aiDialogVisible = ref(false)
const loginDialogVisible = ref(false)
// 新增：存储推广位目标页面路径
const promoTargetPath = '/promotion-detail';

const handleAiClick = () => {
  if (authStore.isLoggedIn) {
    // 已登录，直接打开AI对话框
    aiDialogVisible.value = true
  } else {
    // 未登录，弹出登录框
    loginDialogVisible.value = true
    // 可以添加提示信息
    ElMessage.warning('请先登录以使用AI聊天功能')
  }
}

const onLoginSuccess = () => {
  // 登录成功后自动打开AI对话框
  aiDialogVisible.value = true
}

// 新增热门搜索数据
const hotKeywords = ref(['夏季清仓低至五折', '京东奢品 低至2折', '浪浪山小妖怪']);


const handleHotSearch = (keyword) => {
  console.log('搜索关键词:', keyword);
  // 实际搜索逻辑
};

// 上传相关方法
const handleUploadSuccess = (response, file) => {
  ElMessage.success('上传成功');
  console.log('上传文件:', file);
  // 这里可以处理上传成功后的逻辑，比如识别图片内容等
};

const handleUploadError = (error) => {
  ElMessage.error('上传失败');
  console.error('上传错误:', error);
};

// 新增：处理推广位点击事件
const handlePromoClick = () => {
  if (authStore.isLoggedIn) {
    // 已登录，直接跳转到推广位目标页面
    router.push('/signin')
      .then(() => console.log('跳转至推广页面成功'))
      .catch(err => {
        console.error('跳转失败:', err);
        ElMessage.error('无法打开推广页面');
      });
  } else {
    // 未登录，先跳转到登录页面，并记录要返回的目标页面
    router.push({
      path: '/login',
      query: { redirect: promoTargetPath }  // 存储登录后要跳转的页面
    });
    ElMessage.warning('请先登录以查看推广内容');
  }
};
</script>

<style scoped lang="scss">
/* 样式保持不变 */
.search-container {
  display: flex;
  align-items: flex-start;
  height: auto;
  padding: 15px 30px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

  .logo {
    width: 190px;
    height: 60px;
    margin-right: 30px;
  }

  .search-area {
    flex: 0.8;
    display: flex;
    flex-direction: column;
  }

  .search-box {
    display: flex;
    height: 44px;
    border: 2px solid #e4393c;
    border-radius: 4px;

    input {
      flex: 1;
      padding: 0 15px;
      border: none;
      outline: none;
      font-size: 16px;

      &::placeholder {
        color: #999;
      }
    }

    .search-btn {
      width: 100px;
      background: #e4393c;
      color: white;
      border: none;
      cursor: pointer;
      font-size: 16px;
      transition: all 0.3s;

      &:hover {
        opacity: 0.9;
      }
    }

    .camera-upload {
      display: inline-block;
      margin: 0;

      :deep(.el-upload) {
        display: block;
      }
    }

    .camera-btn {
      width: 50px;
      height: 40px;
      border: none;
      background: none;
      cursor: pointer;

      .icon-xiangji {
        font-size: 20px;
      }
    }
  }

  .hot-search {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.5;
    white-space: nowrap;

    span {
      color: #999;
      margin-right: 5px;
    }

    a {
      color: #666;
      margin-right: 10px;
      text-decoration: none;

      &:hover {
        color: #e4393c;
        text-decoration: underline;
      }
    }
  }

  .jd-ai {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 102px;
    height: 42px;
    margin-left: 15px;
    border-radius: 5px;
    border: 2px solid rgb(254, 158, 188);
    cursor: pointer;

    img {
      width: 20px;
      height: 16px;
      margin-right: 5px;
    }

  }

  .promo_lk {
    display: block;
    width: 160px;
    height: 70px;
    margin-left: 80px;
    overflow: hidden;
    background-size: cover;
    cursor: pointer; /* 增加手型光标，提示可点击 */
  }
}
</style>
